<style> 
    .spinner { 
        margin: 100px auto; 
        width: 20px; 
        height: 20px; 
        position: relative; 
    } 
     
     .container1 > div,  .container2 > div, .container3 > div { 
        width: 6px; 
        height: 6px; 
        background-color: #FF0088; 
     
        border-radius: 100%; 
        position: absolute; 
        -webkit-animation: bouncedelay 1.2s infinite ease-in-out; 
        animation: bouncedelay 1.2s infinite ease-in-out; 
        -webkit-animation-fill-mode: both; 
        animation-fill-mode: both; 
    } 
     
     .spinner .spinner-container { 
        position: absolute; 
        width: 100%; 
        height: 100%; 
    } 
     
     .container2 { 
        -webkit-transform: rotateZ(45deg); 
        transform: rotateZ(45deg); 
    } 
     
     .container3 { 
        -webkit-transform: rotateZ(90deg); 
        transform: rotateZ(90deg); 
    } 
     
     .circle1 { top: 0; left: 0; } 
     .circle2 { top: 0; right: 0; } 
     .circle3 { right: 0; bottom: 0; } 
     .circle4 { left: 0; bottom: 0; } 
     
     .container2 .circle1 { 
        -webkit-animation-delay: -1.1s; 
        animation-delay: -1.1s; 
    } 
     
     .container3 .circle1 { 
        -webkit-animation-delay: -1.0s; 
        animation-delay: -1.0s; 
    } 
     
     .container1 .circle2 { 
        -webkit-animation-delay: -0.9s; 
        animation-delay: -0.9s; 
    } 
     
    .container2 .circle2 { 
        -webkit-animation-delay: -0.8s; 
        animation-delay: -0.8s; 
    } 
     
     .container3 .circle2 { 
        -webkit-animation-delay: -0.7s; 
        animation-delay: -0.7s; 
    } 
     
     .container1 .circle3 { 
        -webkit-animation-delay: -0.6s; 
        animation-delay: -0.6s; 
    } 
     
     .container2 .circle3 { 
        -webkit-animation-delay: -0.5s; 
        animation-delay: -0.5s; 
    } 
     
    .container3 .circle3 { 
        -webkit-animation-delay: -0.4s; 
        animation-delay: -0.4s; 
    } 
     
     .container1 .circle4 { 
        -webkit-animation-delay: -0.3s; 
        animation-delay: -0.3s; 
    } 
     
     .container2 .circle4 { 
        -webkit-animation-delay: -0.2s; 
        animation-delay: -0.2s; 
    } 
     
     .container3 .circle4 { 
        -webkit-animation-delay: -0.1s; 
        animation-delay: -0.1s; 
    } 
     
    @-webkit-keyframes bouncedelay { 
        0%, 80%, 100% { -webkit-transform: scale(0.0) } 
        40% { -webkit-transform: scale(1.0) } 
    } 
     
    @keyframes bouncedelay { 
        0%, 80%, 100% { 
            transform: scale(0.0); 
            -webkit-transform: scale(0.0); 
        } 40% { 
              transform: scale(1.0); 
              -webkit-transform: scale(1.0); 
          } 
    }
    .show_msg{
        width:100%;
        height:35px;
        text-align:center;
        position:fixed;
        left: 0;
        z-index: 999;
    }
    .show_span{
        display: inline-block;
        height: 35px;
        padding: 0 15px;
        line-height: 35px;
        background:rgba(0,0,0,0.8);
        border-radius: 50px;
        color: #fff;
        font-size: 1em;
    }
</style>

<div class="spinner" style="display:none;width:25px;height:25px;position: fixed;top: 30%;left: 46%; z-index: 9999999999;">
    <div class="spinner-container container1">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
    <div class="spinner-container container2">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
    <div class="spinner-container container3">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
</div>

<script>
    /*
    加载中function
     */
    function easyloading(action){

        if(action=='hide'){
            $('.spinner').hide();
        }else if(action=='show'){
            $('.spinner').show();
        }else{
            $('.spinner').hide();
        }
    }

    function showMsg(text, opts){
		opts = $.extend({}, {
			// DEFAULT opts
			position: 'center',
			fadeSpeed: 1000, 
			showTime: 1000
		}, opts);
        
        var show	=	$('.show_msg').length
        if(show>0){

        }else{
            var	div		=	 $('<div></div>');
            div.addClass('show_msg');
            var span	=	$('<span></span>');
            span.addClass('show_span');
            span.appendTo(div);
            span.text(text);
            $('body').append(div);
        }
        $(".show_span").text(text);
        if(opts.position == 'bottom'){
            $(".show_msg").css('bottom','5%');
        }else if(opts.position=='center'){
            $(".show_msg").css('top','');
            $(".show_msg").css('bottom','50%');
        }else{
            $(".show_msg").css('bottom','95%');
        }
        $('.show_msg').hide();
        $('.show_msg').fadeIn(opts.fadeSpeed, function(){
            setTimeout(function(){
            	$('.show_msg').fadeOut(opts.fadeSpeed);
			}, opts.showTime);
		});
    }
</script>